<template>
	<div class="list">
        <ul>
            <router-link v-for="(item,index) in list" :to="item.href" tag="li">
                <div :class="['icon','icon'+(index+1)]"></div>
                <p>{{ item.title }}<span class="sum">{{ item.num }}</span></p>
                <em>  </em>
                <span v-if="item.has" class="hasSuc">已完成</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
   	data() {
      	return {
      	}
   	},
	props : {
		list : {
			type : Array,
			default : [
				{
					title: '个人信息',
	                href: '/',
	                has: true,
        	    },
			]
		}
	}
}
</script>

<style lang="">
	.list{background: #fff; border-top: 1px solid #dfdfdf;}
	.list ul {
 	   overflow: hidden;
	}

	.list ul li {
	    padding-left: 0.1rem;
	    border-bottom: 1px solid #dfdfdf;
	    height: 0.4rem;
	    line-height: 0.4rem;
	    cursor: pointer;
	}

	.list ul li p {
	    float: left;
	}

	.list ul li em {
	    display: block;
	    width: 0.13rem;
	    height: 0.4rem;
	    background-size: 0.08rem 0.14rem !important;
	    background: url(../../assets/arrow.png) right center no-repeat;
	    float: right;
	    margin-right: 0.15rem;
	}

	.list ul .sum{padding: 0 0.05rem; background: #f22f2f; border-radius:50%; font-size: 0.1rem; color: #fff; text-align: center; line-height: 0.12rem; display:block; margin-top: 0.14rem;}

	.list ul li span {
	    float: right;
	    padding-right: 0.1rem;
	    color: #3297fd;
	}
</style>
